<template>
	<!-- 首页暂时不需要 导航栏-->
	<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	<view class="container" v-show="!showLoading">
		<!-- 背景图片 -->
		<img :src="imageSrc" alt="背景图片" class="background-image" />
		<!-- 登录/注册 -->
		<view class="login-box" v-if="!isLogin">
			<!-- 里面的文字 -->
			<view class="login-zi" @click="goToWxLogin()">
				登录/注册
			</view>
		</view>

		<!-- banner主图 -->
		<navigator :url="bannerLink" :class="['banner', { 'logged-in': isLogin }]">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in 4">
					<image :src="bannerUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</navigator>

		<!-- 扫码核销和积分商店页面 -->
		<view :class="['center', { 'logged-in-center': isLogin }]">
			<!-- 左边的扫码核销 -->
			<view @click="scan" class="scan-box">
				<!-- 文字标题 -->
				<view class="scan-title">扫码核销</view>
				<!-- 介绍 -->
				<view class="scan-dec">商品进行扫码核销</view>
				<!-- 图标 -->
				<view class="scan-icon">
					<image src="../../static/icon1.png" mode=""></image>
				</view>
			</view>

			<!-- -----------------------右边积分商店部分 -->
			<navigator url="/pages/stores/stores" class="center-box-right">
				<!-- 商店标题 -->
				<view class="store-title">积分商店</view>
				<!-- 商店简介 -->
				<view class="store-dec">会员独享*兑换大牌商品</view>
				<!-- 商店icon -->
				<view class="store-icon">
					<image src="../../static/icon2.png" mode=""></image>
				</view>
			</navigator>
		</view>

		<!-- --------------------登录状态栏------------------ -->
		<view :class="['statsu', { 'logged-in-statsu': isLogin }]" @click="navigate('/pages/mine/mine')">
			<!-- 左边 -->
			<view class="statsu-left">
				<!-- 上面的字 -->
				<view class="statsu-title">我的</view>
				<view class="statsu-now" v-if="!isLogin">您尚未登录</view>
				<view class="statsu-now" v-else>欢迎您，{{ nickName }}</view>
			</view>


			<!-- 右边的东西 -->
			<view class="statsu-right">
				<image src="../../static/icon3.png" mode=""></image>
			</view>
		</view>

		<!-- ------------------推荐-------------------------- -->
		<view :class="['bottom-recommon', { 'bottom-recommon-log': isLogin }]">
			<!-- 推荐标题 -->
			<view class="recommon-title">推荐商品</view>
			<!-- 推荐商品列表 -->
			<view class="recommon-goods-list">
				<!-- 推荐单页 -->
				<view class="recommon-goods-nav" v-for="(item,index) in goodslist" :key="item.index">
					<navigator :url="item.url">
						<!-- 上面的图片 -->
						<view class="recommon-img">
							<image :src="item.image" mode=""></image>
						</view>

						<!-- 标题 -->
						<view class="recommon-goods-title">{{ item.name }}</view>
						<!-- 积分价格 -->
						<view class="recommon-goods-price">{{ item.integral}}积分</view>

					</navigator>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import api from '../../common/apiService';
	import request from '../../common/request';
	const {
		getBanner,
		getRecommendList
	} = api;
	// 可以改背景图片
	const imageSrc = ref('../../static/bg.png');
	// 加载窗
	const showLoading = ref(true);
	const isLogin = ref(false);
	const avatar = ref('');
	const avatarLogo = ref(request.baseUrl + 'img/avatar.png');
	const nickName = ref('');
	const isAuth = ref(true);
	const goodslist = ref([]);
	const bannerUrl = ref('../../static/banner.png');
	const bannerLink = ref('');

	onMounted(async () => {
		const uid = uni.getStorageSync('uid');
		if (uid) {
			isLogin.value = true;
			const currentUser = uni.getStorageSync('currentUser');
			avatar.value = currentUser.avatar;
			nickName.value = currentUser.nickname;
		} else {
			isLogin.value = false;
		}

		try {
			const [bannerData, recommendData] = await Promise.all([getBanner(), getRecommendList()]);
			console.log(recommendData)
			bannerUrl.value = bannerData ? bannerData[0].image : '';
			bannerLink.value = bannerData ? bannerData[0].link : 0;
			goodslist.value = recommendData?.list.map(item => ({
				...item,
				url: `/pages/goodsdetail/goodsdetail?gid=${item.id}`
			}));

		} catch (error) {
			console.log(error)
			uni.showToast({
				title: error.message || '请求失败，请稍后再试',
				icon: 'none'
			});
		} finally {
			showLoading.value = false;
		}
	});

	const navigate = (url, type = 0) => {
		if (!isLogin.value && type === 1) {
			return;
		}
		uni.navigateTo({
			url
		});
	};

	const goToWxLogin = () => {
		uni.navigateTo({
			url: '/pages/auth/auth'
		});
	};
	// 扫码
	function scan() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100%;
		height: 1642rpx;
		/* 使容器占满整个视口高度 */

		.background-image {
			width: 100%;
			height: 1642rpx;
			object-fit: cover;
			/* 使图片覆盖整个容器 */
			position: absolute;
			/* 使图片绝对定位 */
			top: 0;
			left: 0;
			z-index: -1;
			/* 将图片放在文字后面 */
		}

		// 注册登录
		.login-box {
			width: 400rpx;
			height: 73rpx;
			background: #ffffff;
			position: absolute;
			margin: 194rpx 165rpx 46rpx 174rpx;
			border-radius: 40rpx;

			.login-zi {
				width: 150rpx;
				height: 28rpx;
				// border: 1px solid red;
				font-size: 30rpx;
				line-height: 28rpx;
				color: #004097;
				margin: 22rpx 133rpx 23rpx 134rpx;
				font-weight: 500;
			}
		}

		// 主页
		.banner {
			width: 690rpx;
			height: 320rpx;
			line-height: 320rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 313rpx 29rpx 0 30rpx;
			
			 &.logged-in {
			    margin: 150rpx 29rpx 0 30rpx;
			  }
			
			swiper {
				width: 690rpx;
				height: 320rpx;
				
				swiper-item {
					width: 100%;
					height: 100%;
				
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 中间扫码核销，积分商店
		.center {
			width: 690rpx;
			height: 280rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 663rpx 29rpx 0 30rpx;
			display: flex;
			
			&.logged-in-center {
				margin: 493rpx 29rpx 0 30rpx;
			}

			// 左边扫码盒子
			.scan-box {
				width: 330rpx;
				height: 280rpx;
				// border: 1px solid green;
				background: #ffffff;
				border-radius: 20rpx;

				.scan-title {
					width: 130rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: #000000;
					font-size: 30rpx;
					// margin: 43rpx 0 0 32rpx;
					padding: 43rpx 0 0 32rpx;
				}

				.scan-dec {
					width: 200rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 15rpx 0 0 32rpx;
				}

				// 图标
				.scan-icon {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					margin: 45rpx 0 0 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


			// 右边商店盒子
			.center-box-right {
				width: 330rpx;
				height: 280rpx;
				// border: 1px solid green;
				background: #ffffff;
				border-radius: 20rpx;
				margin: 0 0 0 30rpx;

				.store-title {
					width: 130rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: #000000;
					font-size: 30rpx;
					// margin: 43rpx 0 0 32rpx;
					padding: 43rpx 0 0 32rpx;
				}

				.store-dec {
					width: 300rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 15rpx 0 0 32rpx;
				}

				.store-icon {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					margin: 45rpx 0 0 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		// 登录状态
		.statsu {
			width: 690rpx;
			height: 190rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 963rpx 30rpx 0 29rpx;
			background: #ffffff;
			border-radius: 30rpx;
			display: flex;
			&.logged-in-statsu {
				margin: 793rpx 30rpx 0 29rpx;
			}
			

			// 状态左边
			.statsu-left {
				width: 120rpx;
				height: 103rpx;
				// border: 1px solid red;
				margin: 53rpx 0 0 33rpx;

				.statsu-title {
					width: 80rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}

				// 是否登录
				.statsu-now {
					width: 120rpx;
					height: 20rpx;
					font-size: 20rpx;
					line-height: 20rpx;
					// border: 1px solid green;
					padding: 20rpx 0 0 0;
					color: #666666;
					font-weight: 400;
				}
			}


			// 右边的
			.statsu-right {
				width: 120rpx;
				height: 103rpx;
				line-height: 103rpx;
				// border: 1px solid red;
				margin: 40rpx 45rpx 47rpx 350rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		//底部推荐	 
		.bottom-recommon {
			width: 690rpx;
			height: 400rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 1170rpx 29rpx 54rpx 30rpx;
			background: #ffffff;
			border-radius: 30rpx;
			
			&.bottom-recommon-log {
				margin: 1000rpx 29rpx 54rpx 30rpx;
			}

			.recommon-title {
				width: 200rpx;
				height: 28rpx;
				// border: 1px solid red;
				line-height: 28rpx;
				margin: 43rpx 0 0 26rpx;
				font-size: 30rpx;
				font-weight: 500;
			}

			.recommon-goods-list {
				width: 650rpx;
				height: 274rpx;
				// border: 1px solid red;
				margin: 18rpx 23rpx 0 19rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				/* 一行三个盒子，每个盒子宽190rpx */
				grid-gap: 40rpx;
				/* 盒子之间的间距 */


				.recommon-goods-nav {
					width: 190rpx;
					height: 274rpx;
					// border: 1px solid red;

					.recommon-img {
						width: 190rpx;
						height: 190rpx;
						// border: 1px solid red;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.recommon-goods-title {
						width: 180rpx;
						height: 23rpx;
						line-height: 23rpx;
						// border: 1px solid green;
						font-size: 24rpx;
						margin: 10rpx auto;
						color: #778090;
						font-weight: 400;
						overflow: hidden;
						/* 隐藏超出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.recommon-goods-price {
						width: 180rpx;
						height: 23rpx;
						line-height: 23rpx;
						color: #ee7900;
						// border: 1px solid red;
						margin: 23rpx 0 0 0;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>